<template>
    <div class="main-page-content page-demo-account-role">
        <div class="page-content">
            <a-table
                :columns="columns"
                :data-source="list_role"
                :pagination="false"
                :expanded-row-keys.sync="expandedRowKeys"
            >
                <!-- slot -->
                <template slot="operation" slot-scope="text, record">
                    <a @click="appendRow(record)">新增</a>
                    <a-divider type="vertical" />
                    <a @click="editRow(record)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="delRow(record)">删除</a>
                </template>
            </a-table>
        </div>

        <PageChild class="page-child" title="新增/编辑角色" width="80%" height="80%" v-if="show_form" @close="handelCloseForm">
            <template slot="content">
                <a-form-model
                    ref="PowerForm"
                    :model="form_data"
                    :rules="rules"
                >
                    <a-form-model-item ref="name" label="名称：" prop="name">
                        <a-input placeholder="请填写角色名称"></a-input>
                    </a-form-model-item>
                    <a-form-model-item ref="power" label="权限设置" prop="power">
                        <RolePower></RolePower>
                    </a-form-model-item>
                </a-form-model>
            </template>
        </PageChild>
    </div>
</template>

<script>
import PageChild from "@/components/page_child/page_child";
import RolePower from "./other/power";

export default {
    components:{
        PageChild,
        RolePower
    },
    data() {
        return {
            "list_role" : [],
            "columns"   : [
                {
                    title: '角色名称',
                    dataIndex: 'name',
                },
                {
                    title: '人数',
                    dataIndex: 'num_member',
                    width: '12%',
                },
                {
                    title: '操作',
                    width: '30%',
                    scopedSlots: { customRender: 'operation' }
                },
            ],
            "expandedRowKeys"   : [],

            "form_data" : {},
            // 表单验证
            "rules": {
                "name"  : [
                    { required: true, message: '请填写角色名称', trigger: 'blur' },
                    { min: 3, max: 8, message: '请输入2~8个字', trigger: 'blur' },
                ],
            },

            "show_form":false,
        };
    },
    mounted(){
        this.buildList();
    },
    methods:{
        // 构建数据列表
        buildList(){
            this.list_role = [
                {
                    key: 1,
                    name: '市场部',
                    num_member: 60,
                    children: [
                        {
                            key: 11,
                            name: '营销部',
                            num_member: 42,
                        },
                        {
                            key: 12,
                            name: '策划部',
                            num_member: 30,
                            children: [
                                {
                                    key: 121,
                                    name: '管理者',
                                    num_member: 16,
                                },
                                {
                                    key: 122,
                                    name: '普通职工',
                                    num_member: 16,
                                },
                            ],
                        },
                    ],
                },
                {
                    key: 2,
                    name: '研发部',
                    num_member: 32,
                    children: [
                        {
                            key: 21,
                            name: '服务端',
                            num_member: 42,
                        },
                        {
                            key: 22,
                            name: '前端',
                            num_member: 30,
                        },
                    ],
                },
            ];
        },
        handelCloseForm(){
            this.show_form = false;
             console.log("关闭了弹框");
        },
        // 新增子项
        appendRow(){
            this.show_form = true;
            console.log("点击了修改");
        },
        // 修改单行
        editRow(){
            this.show_form = true;
            console.log("点击了修改");
        },
        // 删除单行
        delRow(){
            this.$message.info("点击了删除");
        },
    }
};
</script>

<style lang="less" scoped>
@import "./role.less";
</style>